<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/d3.v7.min.js"></script>
</head>
<style>
    svg {
      background-color: rgba(255, 0, 0, 0.5);
    }
</style>
<body>
    <div>第一个</div>
    <div id="div2">第二个</div>
    <div class="div3">第三个</div>
    <svg width="600" height="600">
        <rect x="0" y="0" width="100" height="50"></rect>
        <rect x="100" y="100" width="100" height="50" rx="20" ry="20"></rect>
        <circle cx="150" cy="70" r="50" fill="red"></circle>
        <ellipse cx="300" cy="100" rx="50" ry="100" fill="red"></ellipse>
        <rect x="0" y="350" width="20" height="50"></rect>
        <rect x="30" y="250" width="20" height="150"></rect>
        <rect x="60" y="300" width="20" height="100"></rect>
        <line x1="100" y1="300" x2="200" y2="300" stroke="red" stroke-width="10"></line>
        <polyline points="20 10, 80 50, 20 90, 100 90" fill="transparent" stroke="red"></polyline>
    </svg>
    <p id="p1">p标签</p>
    <p id="p2">p标签</p>
    <script>
        // 标签选择器，填写标签名（尖括号的）
        // $("body").css("background", 'red');
        $("div").css("background", 'red');
        // id选择器，填写#id
        $('#div2').css("background", 'blue');
        // 类（class)选择器,填写.类名
        $('.div3').css("background", 'yellow');
        var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];
		$.each(arr, function (index, element) {
    		console.log(index, element);
		});
        // jquery的方法修改p标签的内容，改成jquery修改
        $("#p1").text("jquery修改")
        // d3修改p标签的内容，改成d3.js
        d3.select("#p2").text("d3.js")
        // append
        d3.select("#p2").append("p").text("append添加的元素")
        // 添加svg
        d3.select("body").append("svg").style("background", 'yellow').attr("width",500);

    </script>
</body>
</html>